import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:kkhousekeep/page/home/convenient/repair/repair_result_controller.dart';
import 'package:kkhousekeep/widget/custom_app_bar.dart';

class RepairResultPage extends StatelessWidget {

  const RepairResultPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
          image: DecorationImage(
        image: AssetImage("assets/images/home_bg.png"),
        fit: BoxFit.fill,
      )),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: CustomAppBar(
          "处理结果",
          isCenterTitle: true,
          backgroundColor: Colors.transparent,
        ),
        body: GetBuilder(
          init: RepairResultController(),
          builder: (controller) => Container(
            margin: EdgeInsets.all(32.w),
            padding: EdgeInsets.only(
                left: 48.w, top: 48.h, right: 38.w, bottom: 72.h),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(16.w),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                _builderTopWidget(controller),
                Obx(() => _builderCommonCenterWidget(
                    label: "处理结果", content: controller.result.value)),
                Obx(() => _builderCommonCenterWidget(
                    label: "原因分析", content: controller.cause.value)),
                Obx(() => _builderCommonCenterWidget(
                    label: "预防措施", content: controller.propose.value)),
                _builderBottomWidget(controller),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _builderTopWidget(RepairResultController controller) {
    return SizedBox(
      height: 136.h,
      child: Stack(
        children: [
          ///故障类型  value
          Positioned(
            left: 200.w,
            top: 0,
            child: Obx(() => Text(
                  controller.fatalType.value,
                  style: TextStyle(
                    fontSize: 32.sp,
                    color: const Color(0XFF333333),
                  ),
                )),
          ),

          ///维修标准  value
          Positioned(
            left: 200.w,
            bottom: 28.h,
            child: Obx(() => Text(
                  controller.repairStandard.value,
                  style: TextStyle(
                    fontSize: 32.sp,
                    color: const Color(0XFF333333),
                  ),
                )),
          ),

          Positioned(
            left: 0,
            top: 0,
            child: Text(
              "故障类型",
              style: TextStyle(
                fontSize: 32.sp,
                color: const Color(0XFF6D6D6D),
              ),
            ),
          ),
          Positioned(
            left: 0,
            bottom: 28.h,
            child: Text(
              "维修标准",
              style: TextStyle(
                fontSize: 32.sp,
                color: const Color(0XFF6D6D6D),
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: _builderDividingLine(),
          ),
        ],
      ),
    );
  }

  Widget _builderCommonCenterWidget({
    required String label,
    required String content,
  }) {
    return SizedBox(
      height: 146.h,
      child: Stack(
        children: [
          Positioned(
            left: 0,
            top: 26.h,
            child: Text(
              label,
              style: TextStyle(
                fontSize: 32.sp,
                color: const Color(0XFF6D6D6D),
              ),
            ),
          ),
          Positioned(
            left: 0,
            bottom: 26.h,
            child: Text(
              content,
              style: TextStyle(
                fontSize: 32.sp,
                color: const Color(0XFF333333),
              ),
            ),
          ),
          Positioned(
              left: 0, right: 0, bottom: 0, child: _builderDividingLine()),
        ],
      ),
    );
  }

  Widget _builderBottomWidget(RepairResultController controller) {
    return SizedBox(
      height: 262.h,
      child: Stack(
        children: [
          Positioned(
              left: 0,
              top: 26.h,
              child: Text(
                "维修照片",
                style: TextStyle(
                  fontSize: 32.sp,
                  color: const Color(0XFF6D6D6D),
                ),
              )),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            height: 180.w,
            child: Obx(() => ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: controller.pics.length,
              itemBuilder: (context, index) {
                double leftMargin = index == 0 ? 0 : 15.w;
                double rightMargin = index == 3 ? 0 : 15.w;
                String url = controller.pics[index];

                return InkWell(
                  onTap: () => controller.performClickImageItem(url),
                  child: Container(
                    width: 180.w,
                    height: 180.w,
                    margin:
                    EdgeInsets.only(left: leftMargin, right: rightMargin),
                    decoration: BoxDecoration(
                      image:  DecorationImage(
                        image: NetworkImage(url),
                        fit: BoxFit.fill,
                      ),
                      borderRadius: BorderRadius.circular(6.w),
                    ),
                  ),
                );
              },
            )),
          ),
        ],
      ),
    );
  }

  Widget _builderDividingLine() {
    return Container(
      height: 2.h,
      color: const Color(0XFFF0F2F7),
    );
  }
}
